<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="10">
                <div> 
                    <el-tree
                        :data="data"
                        :props="defaultProps"
                        node-key="id"
                        default-expand-all
                        :expand-on-click-node="false"
                        :render-content="renderContent"
                        >
                    </el-tree>  
                </div>
            </el-col>
            <el-col :span="14"><div>
            </div></el-col>
        </el-row>

        <el-dialog :title="addForm.dialogTitle" :visible.sync="addForm.dialogFormVisible">
          <el-form :model="newMenu" label-position="top">
            <el-form-item label="父菜单名称" :label-width="formLabelWidth">
                <el-input :disabled="addForm.pTitleDisabled" v-model="newMenu.pTitle" auto-complete="off"></el-input>
        </el-form-item>
                            <el-form-item label="菜单名称" :label-width="formLabelWidth">
                      <el-input v-model="newMenu.title" auto-complete="off"></el-input>
                  </el-form-item>
        </el-form-item>
                      <el-form-item label="菜单icon" :label-width="formLabelWidth">
              <el-select v-model="newMenu.icon" placeholder="请选择图标">
              <el-option  value="el-icon-edit"><i class="el-icon-edit"></i></el-option>
              <el-option  value="el-icon-setting"><i class="el-icon-setting"></i></el-option>
    </el-select>
          </el-form-item>
                      <el-form-item label="菜单url" :label-width="formLabelWidth">
              <el-input v-model="newMenu.url" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelAdd" >取 消</el-button>
            <el-button type="primary" @click="submitAdd(node, data)">确 定</el-button>
        </div>
        </el-dialog>
    </div>
</template>

<script>
let id = 1000;

export default {


    data() {
        return {
            newMenu:{
                pid:'',
                pTitle:'',
                icon:'',
                title:'',
                url:''
            },
            formLabelWidth: '120px',
            data: [],
            defaultProps: {
                children: 'subMenu',
                label: 'title'
            },
            addForm:{
                pTitleDisabled:true,
                dialogFormVisible: false,
                dialogTitle:'wocaca',
                subEnterDisabled:false
            }
        };
    },

    methods: {
        init() {
            this.get("/auth/menu/select_all_tree", "", true, "", (result) => {
                this.data = result.data;
            });
        },
        cancelAdd(){
            this.addForm.dialogFormVisible = false;
            this.resetForm();
        },
        submitAdd(store, data){
            this.addForm.dialogFormVisible = false;
            //提交数据
            this.post("/auth/menu/insert", this.newMenu, true, '数据提交中...', (result) => {
                this.$notify_succ('新增成功')
                this.init();
            }, true);
            this.resetForm();
        },
        submitDel(store, data){
            this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
              }).then(() => {
                  // 提交数据
                  this.post("/auth/menu/delete", {id:data.id}, true, '数据提交中...', (result) => {
                    this.$notify_succ('删除成功')
                    this.init();
            }, true);
              }).catch(() => {
                  
              })
        },
        remove(node, data) {
            console.log(node.parent.level)
            console.log(data)
        },
        addMenu(dialogTitle,type,node,data) {
            console.log(node.parent.title)
            console.log(data)
            this.addForm.dialogTitle=dialogTitle;
            if (0==type) {//新增同级
                if (1==node.level) {
                    this.newMenu.pid = node.parent.id;
                    this.newMenu.pTitle = "根目录";
                }else{
                    this.newMenu.pid = node.parent.id;
                    this.newMenu.pTitle = node.parent.label;
                }
            }else if (1==type) {//新增子级
                this.newMenu.pid = data.id;
                this.newMenu.pTitle = data.title;
            }
            this.addForm.dialogFormVisible=true;
        },
        isShow(node, data){
            if (1==node.level) {
                return true;
            }else{
                return false;
            }
        },
        resetForm(){
            this.newMenu.pid='';
            this.newMenu.pTitle='';
            this.newMenu.icon='';
            this.newMenu.url='';
            this.newMenu.title='';
        },
        renderContent(h, {node, data, store}) {
                if (1==node.level) {
                    return (
                    <span style="flex: 1; display: contents; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
                        <span>
                            <i class={node.icon}></i>
                            &nbsp;&nbsp;
                            <span>{node.label}</span>
                        </span>
                        <span style="float: right;">
                            <el-button style="font-size: 12px;" type="text" on-click={() => this.remove(node, data)}>详情</el-button>
                            <el-button style="font-size: 12px;" type="text" on-click={() => this.remove(node, data)}>编辑</el-button>
                            <el-button style="font-size: 12px;" type="text" on-click={() => this.addMenu("新增同级菜单",0,node,data)}>新增同级</el-button>
                            <el-button style="font-size: 12px;" type="text"  on-click={() => this.addMenu("新增下级菜单",1,node, data)}>新增下级</el-button>
                            <el-button style="font-size: 12px;" type="text" on-click={() => this.submitDel(node, data)}>删除</el-button>
                        </span>
                    </span>
                      )
              }else {
                    return (
                        <span style="flex: 1; display: contents; align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
                            <span>
                                <i class={node.icon}></i>
                                &nbsp;&nbsp;
                                <span>{node.label}</span>
                            </span>
                            <span style="float: right;">
                                <el-button style="font-size: 12px;" type="text" on-click={() => this.remove(node, data)}>详情</el-button>
                                <el-button style="font-size: 12px;" type="text" on-click={() => this.remove(node, data)}>编辑</el-button>
                                <el-button style="font-size: 12px;" type="text" on-click={() => this.addMenu("新增同级菜单",0,node,data)}>新增同级</el-button>
                                <el-button style="font-size: 12px;" type="text" on-click={() => this.submitDel(node, data)}>删除</el-button>
                            </span>
                        </span>
                      ) 
              }
        }
    },
    mounted() {
        this.init();
    }
};
</script>